<template>
  <div>
    <h1>HOME</h1>
    <!--动态路由的参数传递 -->
    <router-link to="/home/show?name=张三&age=18" tag="button"
      >music</router-link
    >
    <router-link
      :to="{
        path: '/home/show',
        query: {
          name: '55',
          age: 88,
        },
      }"
      tag="button"
      >work</router-link
    >
    <router-link :to="{ name: 'Show' }" tag="button">play</router-link>
    <button @click="Navi">编程式跳转</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    Navi() {
      this.$router.push({
        // path: '/home/show?name=王五&age=180',
        path: '/home/show',
        // 也可以使用query对象直接携带参数
        query: {
          name: '王五',
          age: 180,
        },
      })
    },
  },
}
</script>

<style>
button {
  height: 30px;
  width: 100px;
  border: none;
}
.active {
  background: orange;
  color: #fff;
}
</style>
